<!--  -->
<template>
  <el-container>
    <el-main>
      <div class="main">
        <div class="back-bar-box mb-30">
          <div class="btn-back" @click="goBack">
            <i class="el-icon-back"></i> 返回
          </div>
          <div class="line"></div>
          <div class="name">课时评论</div>
        </div>
        <div class="select">
          <div class="left">
            <el-button type="danger" @click="remove">删除</el-button>
          </div>
          <div class="right">
            <el-input v-model="memberId" placeholder="学员ID"></el-input>

            <el-select
              v-model="value"
              placeholder="课程"
              v-infinite-scroll="getCourse"
              :infinite-scroll-immediate="false"
              :infinite-scroll-disabled="allLoaded"
            >
              <el-option
                v-for="item in courseItems"
                :key="'评论' + item.id"
                :label="item.title"
                :value="item.id"
              >
              </el-option>
            </el-select>

            <div class="block">
              <el-date-picker
                v-model="time"
                type="daterange"
                range-separator="至"
                start-placeholder="评论时间-开始"
                end-placeholder="评论时间-结束"
              >
              </el-date-picker>
            </div>

            <div class="btn">
              <el-button @click="clear">清空</el-button>
              <el-button type="primary" @click="chooseItem">筛选</el-button>
            </div>
          </div>
        </div>
        <div class="form">
          <el-table
            ref="multipleTable"
            :data="getMemberData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column prop="id" type="selection" min-width="55">
            </el-table-column>

            <el-table-column prop="user_id" label="学员ID" min-width="120">
            </el-table-column>

            <el-table-column prop="name" label="学员" min-width="300">
              <template slot-scope="scope">
                <div class="user-item d-flex">
                  <div class="avatar">
                    <img
                      :src="users && users[scope.row.user_id].avatar"
                      width="40"
                      height="40"
                    />
                  </div>
                  <div class="ml-10">
                    {{ users && users[scope.row.user_id].nick_name }}
                  </div>
                </div>
              </template>
            </el-table-column>

            <el-table-column
              prop="video.title"
              label="课时"
              show-overflow-tooltip
              min-width="223"
            >
            </el-table-column>

            <el-table-column
              prop="original_content"
              label="内容"
              min-width="222"
            >
            </el-table-column>

            <el-table-column label="时间" min-width="200">
              <template slot-scope="scope">
                {{ new Date(scope.row.created_at).toLocaleString() }}
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="block pagination">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { videoComment, video, deleteVideoComment } from "@/network/course";
import { Loading } from "element-ui";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      allLoaded: false,
      memberId: "",
      value: "",
      time: "",
      getMemberData: [],
      users: {},
      multipleSelection: [],
      currentPage: 1,
      total: 1,
      courseCommentsPage: 1,
      courseCommentsSize: 10,
      courseItems: [],
      options: [],
      params: {
        page: 1,
        size: 10,
      },
      flag: false,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    goBack: function () {
      this.$router.go(-1);
    },
    remove: function () {
      console.log("111");
      // console.log(this.multipleSelection[0].id);
      if (this.multipleSelection.length == 0) {
        // console.log("未选择");
        this.$message({
          message: "请选择需要操作的数据",
          type: "warning",
        });
      } else {
        this.$confirm("确认操作?", "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            console.log(this.multipleSelection[0].id);

            deleteVideoComment({
              ids: [this.multipleSelection[0].id],
            }).then((res) => {
              this.getCourseCommentsData();
            });

            this.$message({
              type: "success",
              message: "删除成功!",
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.courseCommentsSize = val;
      this.getCourseCommentsData();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.courseCommentsPage = val;
      this.getCourseCommentsData();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      // console.log(val);
    },
    getCourseCommentsData: function () {
      let loading = Loading.service({
        target: ".form",
      });
      let params = {
        page: this.courseCommentsPage,
        size: this.courseCommentsSize,
      };
      if (this.memberId.length != 0) {
        params["user_id"] = this.memberId;
      }
      if (this.value.length != 0) {
        console.log(this.value);
        params["video_id"] = this.value;
      }
      if (this.time.length != 0) {
        // 当有两个同名的键时，用数组的形式传递参数
        params["created_at"] = this.time;
      }
      videoComment({ params }).then((res) => {
        this.getMemberData = res?.data?.data?.data;
        this.total = res?.data?.data?.total;
        this.users = res?.data?.users;
        this.$nextTick(() => {
          loading.close();
        });
      });
    },
    getCourse: function () {
      if (this.allLoaded) return false;
      this.flag = false;
      video(this.params).then((res) => {
        if (this.params.page > 1) {
          this.courseItems = [...this.courseItems, ...res.data.videos.data];
        } else {
          this.courseItems = res?.data?.videos?.data;
        }
        if (this.params.page >= res.data.videos.last_page) {
          this.allLoaded = true;
        }
        this.params.page++;
        this.flag = true;
      });
    },
    handleScroll(e) {
      //滚动条滚动时，距离顶部的距离
      const scrollTop = e.target.scrollTop;
      //可视区的高度
      const windowHeight = e.target.clientHeight;
      //滚动条的总高度
      const scrollHeight = e.target.scrollHeight;
      // console.log(scrollTop + windowHeight, scrollHeight);
      //滚动条到底部的条件
      if (Math.ceil(scrollTop + windowHeight) >= scrollHeight && this.flag) {
        console.log("触底了");
        this.getCourse();
      }
    },
    clear: function () {
      this.value = "";
      this.memberId = "";
      this.time = [];
      (this.currentPage = 1), this.getCourseCommentsData();
    },
    chooseItem: function () {
      this.getCourseCommentsData();
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getCourseCommentsData();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    let select = document.querySelector(
      ".el-scrollbar .el-select-dropdown__wrap"
    );
    select.addEventListener("scroll", this.handleScroll, true);
  },
  beforeDestroy() {
    // 所有的监听事件、定时器等必须在页面卸载后进行移除，否则可能会造成不可预知的错误，如：内存泄漏
    // 移除监听事件
    // this.$refs.courseList.removeEventListener("scroll", this.handleScroll);
  },
};
</script>
<style lang='scss'  scoped>
.el-container {
  height: 100%;
  text-align: center;
}
.el-main {
  background-color: #f1f2f9;
  padding: 20px 5px 20px 20px;
  .main {
    width: 100%;
    height: auto;
    float: left;
    background-color: #fff;
    box-sizing: border-box;
    padding: 30px;
    border-radius: 15px;
    margin-bottom: 90px;
    box-shadow: 0 2px 4px 0 hsl(0deg 0% 40% / 5%);
    min-width: 1180px;
    .back-bar-box {
      display: flex;
      align-items: center;
      width: 100%;
      height: auto;
      float: left;
      margin-bottom: 30px;
      .btn-back {
        font-size: 14px;
        font-weight: 400;
        color: #333;
        cursor: pointer;
        i.el-icon-back {
          font-family: element-icons !important;
          //   speak: none;
          font-style: normal;
          font-weight: 400;
          font-variant: normal;
          text-transform: none;
          line-height: 1;
          vertical-align: baseline;
          display: inline-block;
          -webkit-font-smoothing: antialiased;
        }
      }

      .line {
        width: 1px;
        height: 14px;
        background-color: #d8d8d8;
        margin-right: 15px;
        margin-left: 15px;
      }

      .name {
        font-size: 14px;
        font-weight: 600;
        color: #333;
      }
    }
    .select {
      width: 100%;
      height: auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 30px;
      .left {
        display: flex;
        align-items: center;
        // el-button {
        // }
      }

      ::v-deep .right {
        display: flex;
        align-items: center;
        .inline-input {
          width: 150px;
        }

        .el-input {
          width: 150px;
        }
        .el-select {
          width: 150px;
          margin-left: 10px;
        }

        .block {
          margin-left: 10px;
          margin-right: 10px;
          // el-date-picker {
          // }
          .el-date-editor .el-range-separator {
            width: 7%;
          }
        }

        // .btn {
        //   // el-button {
        //   // }
        // }
      }
    }
    ::v-deep .form {
      .user-item.d-flex {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        .avatar {
          box-sizing: border-box;
          overflow: hidden;
          img {
            border-radius: 50%;
          }
        }

        .ml-10 {
          margin-left: 10px;
        }
      }
      .el-table th {
        background-color: rgb(241, 242, 249);
      }
      .el-table th > .cell {
        color: #333;
      }
      .el-table .cell.el-tooltip {
        white-space: normal;
      }
      .el-table td div {
        color: #333;
      }
    }
    .pagination {
      margin-top: 30px;
    }
  }
}
</style>